<template>
    <div class="fix-width-frame">
      <div class="main-content f-cb">
          <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="消费记录" name="first">
                  <div class="table_container">
                      <el-table
                          v-loading="tableLoading"
                          :data="tableData"
                          highlight-current-row
                          style="width: 100%">
                          <el-table-column
                              type="index"
                              width="100">
                          </el-table-column>
                          <el-table-column
                              label="金额"
                              width="150">
                              <template slot-scope="scope">
                                {{(scope.row.transAmount/100).toFixed(2)}}
                              </template>
                          </el-table-column>
                          <el-table-column
                              property="gmtCreate"
                              label="消费时间"
                              width="220">
                          </el-table-column>
                          <el-table-column
                              label="备注">
                              <template slot-scope="scope">
                                {{detailForOrder(scope.row)}}
                              </template>
                          </el-table-column>
                      </el-table>
                      <div class="Pagination" style="text-align: left;margin-top: 10px;">
                          <el-pagination
                              @size-change="handleSizeChange"
                              @current-change="handleCurrentChange"
                              :current-page="currentPage"
                              :page-size="limit"
                              :page-count="10"
                              layout="total, prev, pager, next"
                              :total="count">
                          </el-pagination>
                      </div>
                  </div>
              </el-tab-pane>                  
          </el-tabs>
      </div>
    </div>
</template>

<script>
    import headTop from '@/components/headTop'
    import {orderDeposit, doYouyunNetPay} from '@/api/order'
    import {getAccountLog} from '@/api/points'
    export default {
      data () {
        return {
          activeName: 'first',
          formData: {
            'orderCode': '200101', 'orderAmount': 0, 'outAmount': 0
          },
          // payFormData: {
          //   pid: 3059654772,
          //   money: 1,
          //   data: 888522211221455,
          //   url: 'http://www.28liwu.com/#/points',
          //   lb: 1
          // },
          orderId: '',
          coins: [
            {
              name: '29金币',
              value: 29
            },
            {
              name: '99金币',
              value: 99
            },
            {
              name: '199金币',
              value: 199
            }
          ],
          seletCoin: 29,
          tableData: [],
          currentRow: null,
          offset: 0,
          limit: 20,
          count: 0,
          currentPage: 1,
          tableLoading: false
        }
      },
      components: {
        headTop
      },
      mounted () {
        this.initData()
      },
      methods: {
        handleClick (tab, event) {
          console.log(tab, event)
        },
        initData () {
          this.getAccountLog(this.currentPage, this.limit)
        },
        async getAccountLog (page, size) {
          // let d = {
          //   userAccountId: window.userId
          // }
          this.tableLoading = true
          let params = {
            pageIndex: page,
            pageSize: size,
            transDirection: 'OUT',
            userId: this.$route.id
          }
          let result = await getAccountLog(params)
          if (result.status === 200) {
            let data = result.data.data
            this.tableData = data
            this.count = result.data.page.total
          }
          this.tableLoading = false
        },
        detailForOrder(log) {
          // 购买 菜鸟-泉州-申通 垃圾袋1包 数量 20 
          return `购买 ${log.kkTypeDto.kkDesc} ${log.giftDto.resourceDesc} ${log.transMemo}`
        },
        // async submitForm (formName) {
        //   this.$refs[formName].validate(async (valid) => {
        //     if (valid) {
        //       this.formData.outAmount = this.formData.orderAmount
        //       let result = await orderDeposit(this.formData)
        //       if (result.data.code == 200) {
        //         this.orderId = result.data.data.id
        //         this.payFormData.money = this.formData.orderAmount
        //         this.payFormData.data = this.orderId
        //         this.doYouyunNetPay()
        //       } else {
        //         this.$notify.error({
        //           title: '错误',
        //           message: result.data.title,
        //           offset: 100
        //         })
        //         return false
        //       }
        //     } else {
        //       this.$notify.error({
        //         title: '错误',
        //         message: '请输入金币数',
        //         offset: 100
        //       })
        //       return false
        //     }
        //   })
        // },

        // doYouyunNetPay (formName) {
        //   document.myform.submit()
        // },
        handleCurrentChange (page) {
          console.log(page)
          this.currentPage = page
          this.getAccountLog(this.currentPage, this.limit)
        },

        handleSizeChange (page) {
        }
  }
    }
</script>

<style lang="less" scoped>
    @import '../../style/mixin';
    .fix-width-frame {
      margin: 0 auto;
      width: 1000px;
    }
    .el-tabs {
      margin-top: 40px;
    }
    // .main-content{
    //     padding: 0px 30px;
    // }

</style>
